import {useState} from 'react';
import {connect} from "react-redux";
import Taro from '@tarojs/taro';
import {Map, CoverView, CoverImage} from '@tarojs/components';
import position from '../../assets/position.png';
import nav from '../../assets/nav.png';
import './index.less';

function ChargeMap(props) {
  const {dispatch} = props;
  const {stationListAll: stationList = []} = props;
  console.log('stationList', stationList);
  // const currentLocation = Taro.getStorageSync('currentLocation') ? JSON.parse(Taro.getStorageSync('currentLocation')) : {}
  const chooseLocation = Taro.getStorageSync('chooseLocation') ? JSON.parse(Taro.getStorageSync('chooseLocation')) : {}
  const [currentId, setId] = useState(undefined);
  const [currentStation, setStation] = useState({});
  const marksers = stationList.length && stationList.filter((i) => i.pileIds).map((i, index) => {
    return {
      iconPath: '',
      id: index + 1,
      latitude: i?.latitude,
      longitude: i?.longitude,
      width: 20,
      height: 30,
      customCallout: {
        display: 'ALWAYS',        anchorX:0,//横向偏移
        anchorY:0,
      }
    }
  })
  const normalCallout = {
    id: 100000,
    latitude: chooseLocation?.latitude,
    longitude: chooseLocation?.longitude,
    width: 20,
    height: 30,
    // iconPath: mapIcon
    // callout: {
    //   content: '',
    //   color: '#ff0000',
    //   fontSize: 14,
    //   borderWidth: 2,
    //   borderRadius: 10,
    //   borderColor: '#000000',
    //   bgColor: '#fff',
    //   padding: 5,
    //   display: 'ALWAYS',
    //   textAlign: 'center',
    // }
  }
  return (
    stationList && stationList.length ?
    <Map
      scale={12}
      className='mapWrap'
      enable3D
      // style={{height: '100vh', width: '100vw'}}
      // latitude={currentLocation?.latitude} // 当前用户所在位置
      // longitude={currentLocation?.longitude}
      latitude={chooseLocation?.latitude} // 用户地图选择的位置
      longitude={chooseLocation?.longitude}
      showLocation={false}
      markers={[normalCallout, ...marksers]}
      // markers={[marker]}
      onCalloutTap={(e) => {
        setId(e.detail.markerId - 1);
        setStation(stationList.filter((o) => o.pileIds).length ? stationList.filter((o) => o.pileIds)[e.detail.markerId - 1] : {})
      }}
    >
      <CoverView className='tag' onClick={() => Taro.reLaunch({url: '/pages/index/chargeMap'})}>
        <CoverImage src={position} style={{width: 30, height: 30, marginLeft: 2}} />
      </CoverView>
      <CoverView slot='callout'>
        {stationList.length ? stationList.filter((o) => o.pileIds).map((l, index) => {
          const {gunCountInfo = {}} = l;
          // const {fastALL = 0, fastNum = 0, slowALL = 0, slowNum = 0} = gunCountInfo;
          // console.log('gunCountInfo', gunCountInfo)
          return (
              <CoverView marker-id={index + 1} className={currentId === index ? 'mapCoverViewActive' : 'mapCoverView'}>
                {
                  l.price || l.price === 0 ? <CoverView className='price'>
                    ¥{l.price.toFixed(2)}
                  </CoverView> : null
                }
                {
                 gunCountInfo && gunCountInfo.fastALL ? <CoverView className='fastLine'>
                    <CoverView className='fastTag'>快</CoverView>
                    <CoverView className='coverText'>闲 {gunCountInfo.fastNum} / {gunCountInfo.fastALL}</CoverView>
                  </CoverView> : null
                }
                {
                  gunCountInfo && gunCountInfo.slowALL ? <CoverView className='slowLine'>
                    <CoverView className='slowTag'>慢</CoverView>
                    <CoverView className='coverText'>闲 {gunCountInfo.slowNum} / {gunCountInfo.slowALL}</CoverView>
                  </CoverView> : null
                }
              </CoverView>
          )
            }
        ) : null}
      </CoverView>
      {
        currentId || currentId === 0 ?  <CoverView
          className='stationInfoCard'
          onClick={() => {
            if (currentStation.stationId && currentStation.pileIds){
              dispatch({
                type: 'stations/initDetail',
                payload: {
                  current: {
                    ...currentStation
                  }
                }
              })
              Taro.navigateTo({url: `/pages/index/detail?stationId=${currentStation.stationId}&stationName=${currentStation.stationName}&pileIds=${currentStation.pileIds}`})
            }
          }}
        >
          <CoverView className='infoLine'>
            <CoverView className='stationName'>{currentStation.stationName}</CoverView>
            <CoverView
              className='distance'
              onClick={(e) => {
                e.stopPropagation();
                Taro.openLocation({
                  latitude: parseFloat(currentStation?.latitude),	//维度
                  longitude: parseFloat(currentStation?.longitude), //经度
                  name: currentStation?.stationName || "",	//目的地定位名称
                  scale: 12,	//缩放比例
                  address: currentStation?.stationAddress || ""	//导航详细地址
                });
             }}
            >
              <CoverImage src={nav} style={{width: 15, height: 15, marginRight: 2, display: 'inline-block'}} />
              <CoverView>{currentStation.distance ? currentStation.distance.toFixed(2) + 'km' : ''}</CoverView>
            </CoverView>
          </CoverView>
          <CoverView className='infoLine'>
            <CoverView className='price'>¥{currentStation.price.toFixed(2)} <CoverView className='unit'> / 度</CoverView></CoverView>
            <CoverView className='type'>
              {
                currentStation?.gunCountInfo && currentStation?.gunCountInfo?.fastALL ? <CoverView className='fastLine'>
                  <CoverView className='fastTag'>快</CoverView>
                  <CoverView className='coverText'>闲 {currentStation?.gunCountInfo?.fastNum} / {currentStation?.gunCountInfo?.fastALL}</CoverView>
                </CoverView> : null
              }
              {
                currentStation?.gunCountInfo && currentStation?.gunCountInfo?.slowALL ? <CoverView className='slowLine'>
                  <CoverView className='slowTag'>慢</CoverView>
                  <CoverView className='coverText'>闲 { currentStation?.gunCountInfo?.slowNum} / { currentStation?.gunCountInfo?.slowALL}</CoverView>
                </CoverView> : null
              }
            </CoverView>
          </CoverView>
        </CoverView> : null
      }
    </Map> :
    <Map
      scale={12}
      className='mapWrap'
      // style={{height: '100vh', width: '100vw'}}
      // latitude={currentLocation?.latitude} // 当前用户所在位置
      // longitude={currentLocation?.longitude}
      latitude={chooseLocation?.latitude} // 用户地图选择的位置
      longitude={chooseLocation?.longitude}
      showLocation
    />

  )
}

export default connect(({stations}) => {return {...stations}})(ChargeMap)
